<template>
  <div class="header" :key="1" v-if="!isMobile">
    <div class="main1200 menuBox">
      <router-link to="/"
        ><img src="@/assets/images/logo.svg" alt="logo" class="logo"
      /></router-link>
      <div class="menu">
        <router-link to="/" @mouseenter="mouseenter" @mouseleave="mouseleave">
          Sex Toy for Men
          <div class="hoverMenu" v-if="showHoverMenu">
            <div class="childMenu">
              <img src="@/assets/images/header_product_pic1.png" />
              <p class="name">Commondity name</p>
              <p class="tips">New Relase</p>
            </div>
            <div class="childMenu">
              <img src="@/assets/images/header_product_pic1.png" />
              <p class="name">Commondity name</p>
              <p class="tips">New Relase</p>
            </div>
          </div>
        </router-link>
        <router-link
          to="/about"
          @mouseenter="mouseenter"
          @mouseleave="mouseleave"
          >Sex Toy for Women</router-link
        >
        <router-link to="/appIntroduction">Matelink App</router-link>
        <router-link to="/brandStory">Our Story</router-link>
        <router-link to="/blog">Blog</router-link>
      </div>
      <div class="btnBox">
        <img src="@/assets/images/user_icon.svg" class="user" />
        <div class="carBox">
          <img src="@/assets/images/car_icon.svg" />
          <p class="num">3</p>
        </div>
        <div class="btn">Store</div>
      </div>
    </div>
  </div>
  <!-- 这儿可能vue bug，相同标签在客户端依然渲染的!isMobile信息 改为nav标签 -->
  <nav :key="2" class="header-mobile" v-else>
    <div class="header-m">
      <img src="@/assets/images/menu_m.svg" class="menu" @click="showMenu" />
      <img src="@/assets/images/logo_m.png" class="logo" />
      <div>
        <img src="@/assets/images/car_icon.svg" class="car" />
        <img src="@/assets/images/user_icon.svg" class="user" />
      </div>
    </div>
    <div class="menuCont" :style="{ height: menuHeight }">
      <div class="menuList">
        <div v-for="item in menuList" :key="item.name" class="cont">
          <div class="nameBox" @click="item.showChildren = !item.showChildren">
            <p class="name" @click="to(item)">{{ item.name }}</p>
            <el-icon v-if="item.children && !item.showChildren">
              <ArrowDown />
            </el-icon>
            <el-icon v-if="item.children && item.showChildren">
              <ArrowUp />
            </el-icon>
          </div>
          <div v-if="item.children && item.showChildren" class="childBox">
            <div v-for="child in item.children" :key="child.name" class="child">
              <img :src="child.img" alt="img" />
              <p class="name">{{ child.name }}</p>
              <p class="tips">{{ child.tips }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>
<script setup lang="ts">
import img1 from "@/assets/images/header_product_pic1.png";
import img2 from "@/assets/images/header_product_pic2.png";
import { getCurrentInstance, ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance();
const isMobile = app?.appContext.config.globalProperties.$isMobile;
console.log({ isMobile });
const showHoverMenu = ref(false);
const mouseenter = () => {
  showHoverMenu.value = true;
};
const mouseleave = () => {
  showHoverMenu.value = false;
};
const menuList = reactive([
  {
    name: "Sex Toy for Men",
    showChildren: false,
    children: [
      {
        name: "Commondity name",
        tips: "New Relase",
        img: img1,
      },
      {
        name: "Commondity name",
        tips: "New Relase",
        img: img2,
      },
    ],
  },
  {
    name: "Sex Toy for Women",
    showChildren: false,
    children: [
      {
        name: "Commondity name",
        tips: "New Relase",
        img: img1,
      },
      {
        name: "Commondity name",
        tips: "New Relase",
        img: img2,
      },
    ],
  },
  {
    name: "Matelink App",
    url: "/appIntroduction",
  },
  {
    name: "Our Story",
    url: "/brandStory",
  },
  {
    name: "Blog",
    url: "/blog",
  },
]);
const to = (item: any) => {
  if (item.url) {
    menuHeight.value = "0";
    router.push(item.url);
  }
};

const menuHeight = ref("0");
const showMenu = () => {
  menuHeight.value = menuHeight.value === "0" ? "100vh" : "0";
};
</script>
<style lang="scss" scoped>
.header {
  height: 40px;

  .menuBox {
    display: flex;
    align-items: center;

    .logo {
      margin-right: 35px;
    }

    .menu {
      a {
        margin-right: 45px;
        font-size: 12px;
        font-weight: 400;
        line-height: 38px;
        display: inline-block;
      }
    }

    .btnBox {
      margin-left: auto;
      display: flex;
      align-items: center;

      .user {
        margin-right: 35px;
        cursor: pointer;
      }

      .carBox {
        display: flex;
        align-items: center;
        margin-right: 35px;
        cursor: pointer;

        p {
          font-size: 10px;
          color: #846fc1;
          margin-left: 4px;
        }
      }

      .btn {
        width: 68px;
        height: 30px;
        background: #846fc1;
        font-size: 14px;
        color: #fff;
        border-radius: 4px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
      }
    }
  }

  .hoverMenu {
    width: 100%;
    background: #fff;
    position: absolute;
    left: 0;
    top: 38px;
    padding: 6px 0;
    display: flex;
    justify-content: center;
    z-index: 200;

    .childMenu {
      margin-right: 60px;
      width: 130px;
      text-align: center;

      img {
        width: 100%;
      }

      .name {
        font-size: 12px;
        color: #333333;
        margin-top: 10px;
      }

      .tips {
        font-size: 10px;
        color: #f79e1b;
        margin-top: 4px;
      }
    }
  }
}

.header-m {
  height: 0.9rem;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .menu {
    width: 0.56rem;
    margin-left: 0.38rem;
  }

  .logo {
    width: 3rem;
  }

  .car {
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.26rem;
    margin-left: auto;
  }

  .user {
    width: 0.48rem;
    margin-right: 0.26rem;
  }
}

.menuCont {
  width: 100%;
  position: fixed;
  top: 0.9rem;
  left: 0;
  transition: height 0.5s;
  overflow: scroll;
  background: #fff;
  z-index: 2;

  .menuList {
    padding: 0.4rem 0.3rem;

    .cont {
      margin-bottom: 0.52rem;

      .nameBox {
        display: flex;
        align-items: center;
        height: 0.38rem;
        justify-content: space-between;

        .name {
          font-size: 0.28rem;
          font-weight: 400;
          line-height: 0.38rem;
          color: #333333;
        }
      }

      .childBox {
        display: flex;
        padding: 0.3rem 0.5rem;

        .child {
          width: 50%;
          text-align: center;

          img {
            width: 100%;
          }

          .name {
            font-size: 0.2rem;
            margin-top: 0.28rem;
          }

          .tips {
            font-size: 0.2rem;
            margin-top: 0.08rem;
            color: #f79e1b;
          }
        }
      }
    }
  }
}
</style>
